<script>
	let current = 'foo';
	let big = false;
</script>

<button class:active={current === 'foo'} on:click={() => (current = 'foo')}>foo</button>

<button class:active={current === 'bar'} on:click={() => (current = 'bar')}>bar</button>

<button class:active={current === 'baz'} on:click={() => (current = 'baz')}>baz</button>

<label> <input type="checkbox" bind:checked={big} /> big </label>

<div class:big>some {big ? 'big' : 'small'} text</div>

<style>
	button {
		display: block;
	}
	.big {
		font-size: 4em;
	}
	.active {
		background-color: #ff3e00;
		color: white;
	}
</style>
